<template>
  <view class="cascader omit" :style="`width: ${width}; flex: ${flex};`">
    <view
      v-if="city && city.length === 2"
      @click="openSelecter"
      >{{ city[0] }},{{ city[1] }}</view
    >
    <view v-else @click="openSelecter">{{ emptyText || $t("feeServices.allTag") }}</view>
    <u-picker
			:closeOnClickOverlay="true"
			@close="show = false"
      :show="show"
      ref="uPicker"
      :columns="columns"
      @confirm="confirm"
      keyName="label"
      @change="changeHandler"
      @cancel="show = false"
      :cancelText="$t('cancel')"
      :confirmText="$t('confirm')"
      :defaultIndex="[0, 0]"
    ></u-picker>
  </view>
</template>

<script>
import { chinaRegion } from "@/utils/chinaRegion.js";
import { russiaRegion } from "@/utils/russiaRegion.js";
export default {
  props: {
    countryIosCode: {
      type: String,
      default: 'RU'
    },
    width: {
      type: String,
      default: "auto",
    },
    cityValue: {
      type: Array,
      default: () => [],
    },
    // 是否是修改状态
    isEditor: {
      type: Boolean,
      default: () => false,
    },
    emptyText: {
      type: String,
      default: ''
    },
    flex: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      optionsCity: [],
      city: [],
      show: false,
      columns: [],
      language: "",
      chinaParentId: null
    };
  },
  watch: {
    countryIosCode: {
      handler (newName, oldName) {
        this.city = []
        this.optionsCity = []
        this.$emit("update:cityValue", this.city);
        this.getCityList()
      },
      immediate: true
    },
    cityValue: {
      handler (newName, oldName) {
        this.language = uni.getLocale();
        this.city = newName
        this.getCityList()
      },
      immediate: true
    }
  },
  methods: {
    openSelecter () {
      this.show = true
      const picker = this.$refs.uPicker;
      picker.setColumnValues(0, this.optionsCity);
      picker.setColumnValues(1, this.optionsCity[0].children);
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.optionsCity[index].children);
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      if (e.value[0].cn == "全部") {
        this.city = []
        this.$emit('totalValue', '')
      } else {
        const totalValue = {
          parentInfo: {
            cn: e.value[0].cn || e.value[0].label,
            en: e.value[0].en || e.value[0].label,
            ru: e.value[0].ru || e.value[0].label
          },
          childInfo: {
            cn: e.value[1].cn || e.value[1].label,
            en: e.value[1].en || e.value[1].label,
            ru: e.value[1].ru || e.value[1].label
          }
        }
        this.city = [e.value[0].label, e.value[1].label]
        this.$emit('totalValue', totalValue)
      }
      this.$emit("update:cityValue", this.city);
      console.log("confirm", e);
      this.show = false;
    },
    multiSort(array, ...compairers) {
      return array.sort((a, b) => {
        for (const c of compairers) {
          const r = c(a, b);
          if (r !== 0) {
            return r;
          }
        }
      });
    },
    getCityList() {
      let allObj = {
        cn: "全部",
        en: "All",
        ru: "Все",
        label: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
        value: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
        zhSubject: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
        children: [
          {
            value: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
            label: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
            parentId: this.language === 'zh-Hans' ? "全部" : this.language === 'en' ? "All" : "Все",
            cn: "全部",
            en: "All",
            ru: "Все"
          }
        ]
      }
      if (this.countryIosCode === "CN") {
        var chinaCity = [];
        chinaRegion.map((item, index) => {
          if (index <= 34) {
            if (this.city && this.city.length === 2 && this.isEditor) {
              if (this.city[0] === item.name || this.city[0] === item.en || this.city[0] === item.ru) {
                this.city[0] = this.language === 'zh-Hans' ? item.name : this.language === 'en' ? item.en : item.ru
                this.chinaParentId = item.value
              }
            }
            var newObj = {
              value: this.language === 'zh-Hans' ? item.name : this.language === 'en' ? item.en : item.ru,
              label: this.language === 'zh-Hans' ? item.name : this.language === 'en' ? item.en : item.ru,
              parentId: item.value,
              cn: item.name,
              en: item.en,
              ru: item.ru,
              children: []
            };
            chinaRegion.map((itemCity, indexCity) => {
              if (this.city && this.city.length === 2 && this.isEditor) {
                if ((this.city[1] === itemCity.name || this.city[1] === itemCity.en || this.city[1] === itemCity.ru) && itemCity.parent && this.chinaParentId === itemCity.parent) {
                  this.city[1] = this.language === 'zh-Hans' ? itemCity.name : this.language === 'en' ? itemCity.en : itemCity.ru
                }
              }
              if (itemCity.parent === item.value) {
                newObj.children.push({
                    value: this.language === 'zh-Hans' ? itemCity.name : this.language === 'en' ? itemCity.en : itemCity.ru,
                    label: this.language === 'zh-Hans' ? itemCity.name : this.language === 'en' ? itemCity.en : itemCity.ru,
                    parentId: itemCity.value,
                    cn: itemCity.name,
                    en: itemCity.en,
                    ru: itemCity.ru
                });
              }
            });
            chinaCity.push(newObj);
          }
        });
        this.optionsCity = [allObj, ...chinaCity];
        this.columns = [this.optionsCity, this.optionsCity[0].children];
        // chinaCity.map(item => {
        //   return {
        //     ...item,
        //     children: this.multiSort(item.children, (a, b) => a.label.localeCompare(b.label))
        //   }
        // })
        // this.optionsCity = this.multiSort(chinaCity, (a, b) => a.label.localeCompare(b.label))
      } else {
        var russiaCity = [];
        russiaRegion.map((item, index) => {
          var isIn = russiaCity.findIndex(
            (item1) => item1.zhSubject === item.zhSubject
          );
          if (this.city && this.city.length === 2 && this.isEditor) {
            if (
              this.city[0] === item.zhSubject ||
              this.city[0] === item.enSubject ||
              this.city[0] === item.ruSubject
            ) {
              this.city[0] =
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject;
            }
            if (
              this.city[1] === item.zhName ||
              this.city[1] === item.enName ||
              this.city[1] === item.ruName
            ) {
              this.city[1] =
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName;
            }
          }
          if (isIn === -1) {
            russiaCity.push({
              value:
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject,
              label:
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject,
              zhSubject: item.zhSubject,
              cn: item.zhSubject,
              en: item.enSubject,
              ru: item.ruSubject,
              children: [
                {
                  value:
                    this.language === "zh-Hans"
                      ? item.zhName
                      : this.language === "en"
                      ? item.enName
                      : item.ruName,
                  label:
                    this.language === "zh-Hans"
                      ? item.zhName
                      : this.language === "en"
                      ? item.enName
                      : item.ruName,
                  cn: item.zhName,
                  en: item.enName,
                  ru: item.ruName,
                },
              ],
            });
          } else {
            russiaCity[isIn].children.push({
              value:
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName,
              label:
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName,
              cn: item.zhName,
              en: item.enName,
              ru: item.ruName,
            });
          }
        });
        russiaCity.map((item) => {
          return {
            ...item,
            children: this.multiSort(item.children, (a, b) =>
              a.label.localeCompare(b.label)
            ),
          };
        });
        this.optionsCity = this.multiSort(russiaCity, (a, b) =>
          a.label.localeCompare(b.label)
        );
        this.optionsCity = [allObj, ...this.optionsCity]
        this.columns = [this.optionsCity, this.optionsCity[0].children];
      }
    },
  },
};
</script>

<style lang="scss" scope>
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}
.cascader {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.weak {
  opacity: 0.3;
}
</style>
